<template>
  <div class="wsa-box">
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="人员搜索：">
            <el-input
              v-model="formInline.user"
              clearable
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色:">
            <el-select
              v-model="formInline.region"
              clearable
              placeholder="活动区域"
            >
              <el-option label="运营员" :value="false"></el-option>
              <el-option label="维修员" :value="true"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <!-- 分割线------------------------------------- -->
        <el-table
          :data="alldata.currentPageRecords"
          style="width: 100%"
          :stripe="true"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80px"
          ></el-table-column>
          <el-table-column prop="userName" label="人员名称" width="190">
          </el-table-column>
          <el-table-column prop="roleName" label="角色" width="190">
          </el-table-column>
          <el-table-column prop="mobile" label="联系电话" width="180">
          </el-table-column>
          <el-table-column prop="workCount" label="完成工单(本月)" width="180">
          </el-table-column>
          <el-table-column prop="progressTotal" label="进行中工单" width="170">
          </el-table-column>
          <el-table-column
            prop="cancelCount"
            label="拒绝工单(本月)"
            width="160"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <!-- Scoped slot 作用域插槽 带有数据的插槽 -->
            <!-- 通过 Scoped slot 可以获取到 row,column,$index 和 store
          (table 内部的状态管理)的数据，用法参考demo -->
            <!-- <template #default="scope">
            {{ scope.$index }} -- {{ scope.row }}
          </template> -->
            <template #default="scope">
              <el-button type="text" @click="preview(scope.row.userId)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="人员详情" :visible.sync="dialogTableVisible">
          <el-descriptions>
            <el-descriptions-item label="人员名称">{{
              peopletop.userName
            }}</el-descriptions-item>
            <el-descriptions-item label="角色">{{
              peopletop.roleName
            }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{
              peopletop.mobile
            }}</el-descriptions-item>
            <el-descriptions-item label="负责区域">{{
              peopletop.regionName
            }}</el-descriptions-item>
          </el-descriptions>
          <el-table :data="gridData" :border="true">
            <el-table-column
              property="date"
              label=""
              width="150"
            ></el-table-column>
            <el-table-column property="name" label="总工单数"></el-table-column>
            <el-table-column
              property="address"
              label="拒绝工单"
            ></el-table-column>
            <el-table-column property="wc" label="完成工单"></el-table-column>
            <el-table-column
              property="jxz"
              label="进行中工单"
            ></el-table-column>
          </el-table>
        </el-dialog>
        <!-- 分割-------------------------- -->
        <div class="block">
          <el-pagination
            @next-click="nextpage"
            @prev-click="previouspage"
            prev-text="上一页"
            next-text="下一页"
            :page-size="+alldata.pageSize"
            layout="total, prev, next"
            :total="+alldata.totalCount"
          >
          </el-pagination>
          <span class="yema"
            >第{{ +alldata.pageIndex }}/{{ +alldata.totalPage }}页</span
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { workloadlist, basicinformation, workstatistics } from '@/api/personnel'
// 日期格式化，返回值形式为yy-mm-dd
function timeFormat(date) {
  if (!date || typeof date === 'string') {
    this.error('参数异常，请检查...')
  }
  const y = date.getFullYear() // 年
  const m = date.getMonth() + 1 // 月
  const d = date.getDate() // 日
  return y + '-' + `${m < 10 ? '0' + m : m}` + '-' + `${d < 10 ? '0' + d : d}`
}
// 获取这周的周一
function getFirstDayOfWeek(date) {
  const weekday = date.getDay() || 7 // 获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7
  date.setDate(date.getDate() - weekday + 1) // 往前算（weekday-1）天，年份、月份会自动变化
  return timeFormat(date)
}
// 获取当月第一天
function getFirstDayOfMonth(date) {
  date.setDate(1)
  return timeFormat(date)
}
// 获取当年第一天
function getFirstDayOfYear(date) {
  date.setDate(1)
  date.setMonth(0)
  return timeFormat(date)
}
export default {
  async created() {
    const res = await workloadlist(this.pageIndex)
    console.log(res)
    this.alldata = res
  },
  name: 'workload-page',
  data() {
    return {
      alldata: '', // 所有数据
      peopletop: '', // 详情所有数据
      pageIndex: 1,
      dialogTableVisible: false,
      formInline: {
        user: '',
        region: ''
      },
      currentPage4: 4,
      gridData: [
        {
          date: '本周',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          wc: '',
          jxz: ''
        },
        {
          date: '本月',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          wc: '',
          jxz: ''
        },
        {
          date: '本年',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          wc: '',
          jxz: ''
        }
      ]
    }
  },
  methods: {
    // 封装
    getid() {
      console.log(1)
    },
    // 上一页
    async previouspage() {
      this.pageIndex--
      const res = await workloadlist(this.pageIndex)
      console.log(res)
      this.alldata = res
    },
    // 下一页
    async nextpage() {
      this.pageIndex++
      const res = await workloadlist(this.pageIndex)
      console.log(res)
      this.alldata = res
    },
    // 查看详情
    async preview(id) {
      const time = await timeFormat(new Date()) // 本日第一天
      console.log(`${time}+23:59:59`)
      const time1 = await getFirstDayOfWeek(new Date()) // 本周第一天
      console.log(`${time1}+00:00:00`)
      const time2 = await getFirstDayOfMonth(new Date()) // 本月第一天
      console.log(`${time2}+00:00:00`)
      const time3 = await getFirstDayOfYear(new Date()) // 本年第一天
      console.log(`${time3}+00:00:00`)
      // ----------------------------------------------------------分割时间
      const resa = await workstatistics(
        id,
        `${time1}+00:00:00`,
        `${time}+23:59:59`
      )
      console.log(resa)
      this.gridData[0].name = resa.total
      this.gridData[0].address = resa.cancelCount
      this.gridData[0].wc = resa.workCount
      this.gridData[0].jxz = resa.progressTotal
      const resb = await workstatistics(
        id,
        `${time2}+00:00:00`,
        `${time}+23:59:59`
      )
      console.log(resb)
      this.gridData[1].name = resb.total
      this.gridData[1].address = resb.cancelCount
      this.gridData[1].wc = resb.workCount
      this.gridData[1].jxz = resb.progressTotal
      const resc = await workstatistics(
        id,
        `${time3}+00:00:00`,
        `${time}+23:59:59`
      )
      console.log(resc)
      this.gridData[2].name = resc.total
      this.gridData[2].address = resc.cancelCount
      this.gridData[2].wc = resc.workCount
      this.gridData[2].jxz = resc.progressTotal
      // -------------------------------------------
      this.dialogTableVisible = true
      console.log(id)
      const res = await basicinformation(id)
      console.log(res)
      this.peopletop = res
    },
    async onSubmit() {
      let params = ''
      if (this.formInline.user) {
        if (this.formInline.region === '') {
          params = {
            userName: this.formInline.user
          }
        } else {
          params = {
            userName: this.formInline.user,
            isRepair: this.formInline.region
          }
        }
      } else {
        if (this.formInline.region === '') {
          const res = await workloadlist(this.pageIndex)
          console.log(res)
          this.alldata = res
          return
        } else {
          params = {
            isRepair: this.formInline.region
          }
        }
      }
      console.log(params)
      const res = await workloadlist(this.pageIndex, params)
      console.log(res)
      this.alldata = res
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang="scss">
.btn-del {
  color: red;
}
::v-deep .el-descriptions__table {
  background-color: #f3f6fb;
  margin-bottom: 20px;
  text-indent: 5px;
}
// 按钮
.yema {
  display: inline-block;
  margin-left: 100px;
  transform: translateY(-27px);
  font-size: 14px;
  color: #ccc;
}
::v-deep .btn-prev {
  margin-left: 1170px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #d5ddf8 !important;
}
::v-deep .el-pagination__total {
  color: #ccc;
  font-size: 14px !important;
}
::v-deep .el-pagination__total::after {
  content: '记录';
}
::v-deep .btn-next {
  float: right;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #d5ddf8 !important;
}
.el-pagination {
  margin-top: 20px;
}
</style>
